<template>
  <div class="table-box">
    <el-table :data="tableGroupData.tableData"
    :empty-text="tableGroupData.emptyText||'暂无数据'"
    @selection-change="handleSelectionChange"
    :row-class-name="tableRowClass" style="width:99%" class="table">
      <el-table-column
        type="selection"
        width="55" v-if="showSelection">
      </el-table-column>
      <el-table-column v-for="(item,index) in tableGroupData.columnsData"  :key="index"
        :prop="item.propValue"
        :width="item.width?item.width:'auto'"
        :label="item.name">
        <template slot-scope="scope">
          <img v-if="scope.row[item.propValue] && scope.row[item.propValue].toString().startsWith('data:image')"
            :src="scope.row[item.propValue]" class="img-type">
          <span v-else>{{scope.row[item.propValue]}}</span>
        </template>
      </el-table-column>
      <el-table-column
         label="操作"
         fixed="right"
         :width="tableGroupData.operationWidth?tableGroupData.operationWidth:'200'"
         prop="operation" v-if="tableGroupData.isOperation">
         <template slot-scope="scope">
           <div  class="operation-box">
             <el-button type="text" size="small" :class="['btn',sub.color]"
             v-for="(sub,i) in scope.row.operationArr" :key="i"
             @click="clickButton(scope.row,sub)"
             >{{sub.text}}</el-button>
             <el-dropdown  @command="handleCommand" v-if="scope.row.packBtnGroup">
               <span class="el-dropdown-link">
                 <el-button size="mini" plain type="danger">{{scope.row.packBtnGroup.name}} <i class="el-icon-arrow-down"></i></el-button>
               </span>
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item v-for="(sub,i) in scope.row.packBtnGroup.arr" :key="i"
                 :command="{'index': scope.$index,'row': scope.row,'command':sub}">{{sub.text}}</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </div>
         </template>
       </el-table-column>
    </el-table>
    <el-pagination class="table-pagination pagination-front" v-if="pageshow&&!hidePagination&&!pageOptions"
    @size-change="handleSizeChange" @current-change="handleCurrentChange"
     :current-page="page.crnPage" :page-sizes="[5, 10, 15, 20]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper"
      :total="page.allCnt">
    </el-pagination>
    <el-pagination class="table-pagination pagination-back" v-if="pageshow&&pageOptions"
    @size-change="backSizeChange" @current-change="backCurrentChange"
     :current-page="pageData.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="pageData.pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="pageData.total">
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableGroupData:this.tableData,
      pageData:this.pageOptions||{
        pageNum: 1,
        pageSize: 10,
        total:0,
        currentPage:1
      },
      pageshow:true,
      tableOptions:[],
      page: {
        allCnt: 10,
        allPage: 2,
        crnPage: 1,
        size: 5
      },
      tableGroupData1: {
        columnsData: [
          {
            name: "日期",
            width: "",
            propValue: "date",
          },
          {
            name: "地址",
            width: "",
            propValue: "address",
          },
          {
            name: "电话",
            width: "",
            propValue: "phone",
          }
        ],
        tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            phone:"124356754321",
            id:"001",
            operationArr: [
              {text:"查看",type:"A"}
            ]
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
            phone:"124356754321",
            id:"002",
            operationArr: [
              {text:"查看",type:"A"},
              {text:"删除",type:"B"}
            ]
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
            phone:"124356754321",
            id:"003",
            operationArr: [
              {text:"查看",type:"A"}
            ]
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
            phone:"124356754321",
            id:"004",
            operationArr: [
              {text:"删除",type:"A"}
            ]
          }
        ],
        isOperation: true
      }
    }
  },
  props: {
      hidePagination:{
        type:Boolean
      },
      showSelection:{
        type:Boolean
      },
      showTotal:{
        type:Boolean
      },
      pageOptions: {
          type: Object
      },
      tableData: {
          type: Object
      }
  },
  watch: {
      pageOptions(optionData){
        this.pageData=optionData
      },
      tableData(optionData) {
        this.tableOptions=JSON.parse(JSON.stringify(optionData.tableData))

        this.tableGroupData=optionData

        // 前端分页
        if(!this.pageOptions){
          let tableData=optionData.tableData
          if(this.hidePagination){
            this.tableGroupData.tableData = tableData
          }else{
            let size=this.page.size>tableData.length?tableData.length:this.page.size

            this.tableGroupData.tableData = tableData.slice(0,size)
          }

          // 设置分页信息
          this.pageshow=false
          //重新渲染分页
          this.$nextTick(() => {
            this.pageshow = true
            this.page={
              allCnt: tableData.length,
              allPage: Math.ceil(tableData.length/this.page.size),
              crnPage: 1,
              size: this.page.size
            }
          })
        }
      }
  },
  created(){
    // 前端分页
    if(!this.pageOptions){
      this.tableOptions=JSON.parse(JSON.stringify(this.tableData.tableData))

      let tableData=this.tableData.tableData
      let size=this.page.size>tableData.length?tableData.length:this.page.size

      this.tableGroupData.tableData = tableData.slice(0,size)
      // 设置分页信息
      this.page={
        allCnt: tableData.length,
        allPage: Math.ceil(tableData.length/this.page.size),
        crnPage: 1,
        size: this.page.size
      }
    }
  },
  methods: {
    // 编辑下拉按钮点击事件
    handleCommand(v){
      this.$emit('watchTable',v.row,v.command);
    },
    handleClick(row) {
      // console.log(row);
    },
    clickButton(row,btn){
      this.$emit('watchTable',row,btn);
    },
    // 前端换页
    handleCurrentChange(currentPage) {
      // console.log(currentPage);
      if(this.page.size>this.tableOptions.length){
        return
      }
      let satrt=this.page.size*(currentPage>1?currentPage-1:0)
      let end=satrt+this.page.size
      end=end>this.tableOptions.length?this.tableOptions.length:end

      this.tableGroupData.tableData = this.tableOptions.slice(satrt,end)

    },
    // 前端每页个数
    handleSizeChange(size) {
      // console.log(size,99);
      this.page.size=size
      this.page.crnPage=1
      this.pageshow=false
      this.$nextTick(() => {//重新渲染分页
        this.pageshow = true
        let newSize=size>this.tableOptions.length?this.tableOptions.length:size

        this.tableGroupData.tableData = this.tableOptions.slice(0,newSize)
      })
    },

    // 后端换页
    backCurrentChange(currentPage) {
      console.log(currentPage);
      this.$emit('watchTable',currentPage,{type:"currentPage"});
      // if(this.page.size>this.tableOptions.length){
      //   return
      // }
      // let satrt=this.page.size*(currentPage>1?currentPage-1:0)
      // let end=satrt+this.page.size
      // end=end>this.tableOptions.length?this.tableOptions.length:end
      //
      // this.tableGroupData.tableData = this.tableOptions.slice(satrt,end)

    },
    // 后端每页个数
    backSizeChange(size) {
      console.log(size,99);
      this.$emit('watchTable',size,{type:"pageSize"});
      this.pageshow=false
      this.$nextTick(() => {//重新渲染分页
        this.pageshow = true
      })
    },
    handleSelectionChange(val){
      let arr=[]
      val.map((item,index)=>{
        arr.push(item.id)
      })
      this.$emit('watchTable',arr,{type:"tableSelect"});
    },
    tableRowClass({
      row,
      rowIndex
    }) {
      if (rowIndex % 2 !== 0) {
        return 'active-row'
      }
      return ''
    }
  },
}
</script>
<style lang="less">
.el-table__row el-table__row--striped {
    background-color: red;
}
.active-row {
    background-color: #E6F9FF !important;
}
.hover-row:hover,
.hover-row:hover > td {
    background-color: #F5F7FA !important;
}
.img-type{
  width: 100%;
  height: 50px;
  display: block;
}
.el-dialog__header{
  text-align: center;
}
.el-dialog__header>span{
  position:relative;
}
.el-dialog__header>span::before{
  content:'';
  display:inline-block;
  width:3px;
  height:18px;
  background:#0099ff;
  position: absolute;
  left: -10px;
  top: 4px;
}
.el-dialog__footer{
  border-top: 1px solid #eeeeee;
  padding: 15px 20px;
}
.btn{
  margin:0 !important;
  span{
    border-right: 1px solid #E4E7ED;
    padding: 0 5px;
    font-size:14px;
    color: #0099FF;
  }
}
.operation-box>.btn:last-child span{
  border-right:none;
}
.el-table td, .el-table th.is-leaf{
  border-bottom: 1px solid #E4E7ED;
}
.el-table thead{
  color: #666;
  font-size:14px;
}
.el-table{
  color: #666;
  font-size:14px;
}
.danger>span{
  color: #F52032 !important;
}
.success>span{
  color: #5CD121 !important;
}
.warn>span{
  color: #FFBF40 !important;
}
.table-box{
  // height: 85%;
  flex: 1;
  padding-bottom: 50px;
  position: relative;
}
.table-pagination{
  position: absolute;
  right: 0px;
  bottom: 10px;
}
.table{
  width:auto !important;
  /* height: 100%; */
  overflow: auto;
  margin-top: 2px;
}
.el-table--border::after, .el-table--group::after, .el-table::before{
  background-color: transparent !important;
}
.table-box .el-table--scrollable-x .el-table__body-wrapper{
  /* min-height: 90%; */
}
.table-box .el-table__footer-wrapper,.table-box .el-table__header-wrapper{
  /* min-height: 10%; */
}
.el-table__fixed-right::before, .el-table__fixed::before{
  height:0;
}
</style>
